<!DOCTYPE html>
<!--引入：thymeleaf的头部前缀 -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- @{} 是thymeleaf表示 需要向后端发请求-->
    <script th:src="@{/static/js/vue.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/elementui.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/axios.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/axios.interceptor.js}" type="text/javascript"></script>
    <link th:href="@{/static/css/elementui.css}" rel="stylesheet" type="text/css">
    <style>
        .grid-content {
            border-radius: 4px;
            min-height: 36px;
            display: flex;
            justify-content: center;  /* 水平居中 */
            align-items: center;      /* 垂直居中 */
            color: white;             /* 文字颜色为白色 */
        }
        .bg-purple-dark {
            background: #99a9bf;
        }

    </style>
</head>
<body >
<div id="app">
    <el-container>
        <el-header>
            <el-row>
                <el-col :span="24"><div class="grid-content bg-purple-dark">艾瑞图书商城</div></el-col>
            </el-row>
        </el-header>
        <el-main>
            <!-- 第1行：提供搜索功能，注册/登录 ……-->
            <el-row>

                <el-col :span="24"><div style="text-align: right">
                    <el-link :href="'/page/toIndex'">回到首页</el-link>
                    <span v-if="userName == null || userName == ''">
                                 <el-link>注册</el-link>
                                 <el-link :href="'/page/toLogin'">登录</el-link>
                            </span>
                    <span v-else>
                                欢迎你，{{userName}}
                            </span>
                    <el-link>个人信息</el-link>
                    <el-link>我的购物车</el-link>
                    <el-link>我的订单</el-link>
                    <el-link>退出</el-link>
                </div></el-col>
            </el-row>
            <!-- 第2行：清空购物车-->
            <el-row>
                <el-col :span="24"><div>
                    <el-button type="info">清空购物车</el-button>
                </div></el-col>
            </el-row>
            <!-- 第3行：显示购物车详细-->
            <el-row>
                <el-col :span="24"><div>
                    <el-table
                            ref="multipleTable"
                            :data="goods.items"
                            style="width: 100%"
                            @selection-change="handleSelectionChange">

                        <el-table-column
                                type="selection"
                                width="55">
                        </el-table-column>


                        <el-table-column
                                prop="name"
                                label="商品名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="商品图片">
                            <template slot-scope="scope">
                                <el-image
                                        style="width: 100px; height: 100px"
                                        :src="scope.row.imgsrc"
                                ></el-image>
                            </template>
                        </el-table-column>

                        <el-table-column
                                prop="provider"
                                label="出版社"
                        >
                        </el-table-column>


                        <el-table-column
                                prop="price"
                                label="商品单价"
                        >
                        </el-table-column>

                        <el-table-column
                                label="购买数量"
                        >
                            <template slot-scope="scope">
                                <el-input-number v-model="scope.row.buycount" @change="handleChange" :min="1" size="mini"></el-input-number>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="sumPrice"
                                label="小计"
                        >
                        </el-table-column>

                        <el-table-column
                                label="操作"
                        >
                            <template slot-scope="scope">
                                <el-button @click="removeById(scope.row.id)">移除</el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </div></el-col>
            </el-row>

            <!-- 第4行，显示总价-->
            <el-row style="margin-top: 20px">
                <el-col :span="22"><div>
                    总价(元) : {{ goods.totalPrice }}
                </div></el-col>
                <el-col :span="2"><div>
                    <el-button type="info">下订单</el-button>
                </div></el-col>
            </el-row>

        </el-main>
    </el-container>
</div>
</body>
<script>
    let app = new Vue({
        el:"#app",
        data(){
            return {
                goods : {
                    items:[],
                    totalPrice: 0.0
                },
                userName :"",
                multipleSelection: [] /*被多选的数据*/
            }
        },
        methods:{
            removeById(id){//id 当前书的ID

            },
            handleChange(value) {
                console.log(value);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            loadMyShoppingCar(){
                axios.get('/shopping/findAllGoodsInfo')
                    .then( (res) =>{
                        if(res.data.code == 200){
                            this.goods = res.data.datas;
                        }else{
                            this.$message.error(res.data.msg);
                        }

                    })
                    .catch( (error)=> {
                        console.log(error);
                    });
            }
        },created(){
            this.loadMyShoppingCar();
            this.userName = localStorage.getItem("userName");
        }
    });
</script>


</html>